<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #92adf5 25%, #c176f3);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .login-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            padding: 40px;
            width: 100%;
            max-width: 500px;
            min-width: 300px;
        }

        .login-container h2 {
            text-align: center;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .form-label {
            font-weight: 600;
        }

        .form-control {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 12px;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .form-control::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

        .btn {
            padding: 12px;
            border-radius: 10px;
            font-weight: 600;
        }

        .btn-primary {
            background: #16222A;
            border: none;
        }

        .btn-primary:hover {
            background: #0c1317;
        }

        .text-center a {
            color: white;
            text-decoration: underline;
        }

        .text-center a:hover {
            color: #E4E5E6;
        }

        .alert {
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
        }
        
        .alert-danger {
            background: rgba(255, 0, 0, 0.2);
        }
        
        .alert-success {
            background: rgba(0, 255, 0, 0.2);
        }
    </style>
</head>

<body>
    <div class="login-container">
        <h2 class="text-center mb-4">用户登录</h2>
        <form id="loginForm">
            <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="username" name="username" required 
                       placeholder="请输入您的用户名">
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <input type="password" class="form-control" id="password" name="password" required 
                       placeholder="请输入您的密码">
            </div>
            <div class="d-grid">
                <button type="submit" class="btn btn-primary" id="loginBtn">登录</button>
            </div>
            <div class="mt-3 text-center">
                <a href="/register">注册新账号</a> |
                <a href="/forgot_password">忘记密码</a>
            </div>
        </form>
        <div id="message" class="mt-3"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#loginForm').submit(function (e) {
                e.preventDefault();
                
                // 添加加载状态
                const btn = $('#loginBtn');
                const originalText = btn.html();
                btn.prop('disabled', true);
                btn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 登录中...');
                
                $.ajax({
                    type: 'POST',
                    url: '/login',
                    data: $(this).serialize(),
                    success: function (response) {
                        if (response.success) {
                            window.location.href = '/dashboard';
                        } else {
                            $('#message').html('<div class="alert alert-danger">' + response.message + '</div>');
                        }
                        btn.prop('disabled', false);
                        btn.html(originalText);
                    },
                    error: function() {
                        btn.prop('disabled', false);
                        btn.html(originalText);
                        $('#message').html('<div class="alert alert-danger">登录请求失败，请重试</div>');
                    }
                });
            });
        });
    </script>
</body>

</html>